<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item
        placement="top"
        v-for="(item, index) in nodeData"
        :key="index"
      >
        <el-card>
          <h4>
            <span v-if="item.type === 'BACK'" style="color: red;">【退回】</span
            >{{ item.stepName }}
            <span>{{ item.executeType | executeType }}</span>
          </h4>
          <div v-if="item.executeType !== 'JUMP'">
            <p>
              处理人： {{ item.receiverName }}
              <span class="ml20">
                {{
                  item.openTime ? "查看时间：" + item.openTime : "待查看"
                }}</span
              >
              <span class="ml20" v-if="item.completedTime"
                >处理时间： {{ item.completedTime }}</span
              >
              <span v-else class="ml20">
                {{ item.executeType | keyText("WORKFLOW_TASK_STATUS") }}</span
              >
            </p>
          </div>
          <div
            v-if="
              item.executeType !== 'JUMP' &&
                item.prevId != '00000000000000000000000000000000'
            "
          >
            <p>
              发送人： {{ item.senderName
              }}<span class="ml20">发送时间： {{ item.sendTime }}</span>
            </p>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "flowNodeHistory",
  props: ["taskId"],
  data() {
    return {
      nodeData: []
    };
  },
  mounted() {
    this.getTaskFlowNodeHistory();
  },
  watch: {
    taskId(val) {
      console.log(val);
      if (val) {
        this.getTaskFlowNodeHistory();
      }
    }
  },
  filters: {
    executeType: function(value) {
      switch (value) {
        case "BACK":
          return "【退回】";
        case "COMPLETED":
          return "【完成】";
        case "OTHER_HANDLE":
          return "【他人已处理】";
        case "OTHER_BACK":
          return "【他人已退回】";
        case "DELIVER":
          return "【转交】";
        case "ENTRUST":
          return "【委托】";
        case "READ":
          return "【阅知】";
        case "JUMP":
          return "【跳转】";
        case "END":
          return "【终止】";
        case "SUPERVISION_LAUNCH":
          return "【发起督办】";
        default:
          return "";
      }
    }
  },
  methods: {
    // 获取任务流程轨迹
    getTaskFlowNodeHistory() {
      if (this.taskId) {
        this.API.getWorkflowTaskHistory({ id: this.taskId }).then(res => {
          this.nodeData = res.data;
        });
      }
    }
  }
};
</script>

<style scoped></style>
